<template>
	<view class="page-box">
		<view class="top-type centerXY columnY">
			<template v-if="info.pay_status == 1">
				<view class="font-36 font-w-500">待支付</view>
				<view class="font-26 mar-top-20 centerXY">
					<view>支付倒计时：</view>
					<up-count-down @finish="getOrderInfo" v-if="info.end_pay_at" :time="hanldeTime(info.end_pay_at)"
						@change="onChangeTime" format="mm:ss">
						<view class="time color-error">
							<text>{{ timeData.minutes > 9 ? timeData.minutes : '0'+timeData.minutes}}&nbsp;分</text>
							<text>{{ timeData.seconds > 9 ? timeData.seconds : '0'+timeData.seconds }}&nbsp;秒</text>
						</view>
					</up-count-down>
				</view>
			</template>
			<view v-if="info.pay_status == 5" class="font-36 font-w-500 centerXY">
				<image class="imageIcon" src="/static/image/cancel.png"></image>
				<view>订单已取消</view>
			</view>
		</view>

		<view class="list-box pad-30">
			<view class="list">
				<view class="pad-30 bg-white radius30">
					<view class="address font-30 font-w-500">
						地址：{{service_order.province}}{{service_order.city}}{{service_order.region}}{{service_order.street}}{{service_order.detail}}{{service_order.address_detail}}
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">订单号</view>
						<view class="color-text">{{info.order_no}}</view>
					</view>
					<view v-if="service_order.plan_begin_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">预计上门时间:</view>
						<view class="color-text">{{timeFormat(service_order.plan_begin_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
					<view v-if="service_order.plan_end_at > 0" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">预计结束时间:</view>
						<view class="color-text">{{timeFormat(service_order.plan_end_at, 'yyyy-mm-dd hh:MM')}}</view>
					</view>
				</view>

				<!-- 工人 -->
				<view class="pad-30 bg-white mar-top-30 radius30">
					<view :class="service_order_workers.length > 0 ? '':'mar-bottom-30'"
						v-for="item in service_order_workers" :key="item.id">
						<view class="betweenX font-26 font-w-400 centerY">
							<view class="color-text centerY shrink">
								<image class="avatar" :src="item.avatar" mode="aspectFill"></image>
								<view class="mar-left-20">
									<view class="font-30">{{item.name}}</view>
								</view>
							</view>
							<view v-if="info.pay_status == 3" class="centerXY columnY">
								<isCollect class="mar-bottom-10" :workerId="item.id"></isCollect>
								<view @click="hanldeOpenTel(item)"
									class="button-style pad-top-bottom-10 pad-left-right-40">联系</view>
							</view>
						</view>
					</view>
				</view>

				<view class="pad-30 bg-white mar-top-30 radius30" v-for="item in service_order_task" :key="item.id">
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">已选服务</view>
						<view class="color-text"> {{item.work_name}}</view>
					</view>
					<view v-if="service_order.max_plan_spend_time" class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">预计花费时长:</view>
						<view class="color-text">{{item.buy_num}}{{item.unit}}</view>
					</view>
					<view class="betweenX mar-top-30 font-26 font-w-400">
						<view class="color-646464">备注：</view>
						<view class="color-text">{{item.user_remark}}</view>
					</view>

					<view class="betweenX centerXY mar-top-15" v-for="qu in  item?.questions" :key="qu.id">
						<template v-if="qu.answer != null">
							<view class="flex-w font-26 betweenX centerXY" v-if="qu.type == 'checkbox'">
								<view class="color-646464">{{qu.title}}</view>
								<view v-if="qu?.answer.length > 0">{{qu.answer.join(",")}}</view>
							</view>
							<template v-if="qu.type == 'radio'">
								<view class="font-30 flex-w">{{qu.title}}</view>
								<up-radio-group v-model="qu.answerVal" disabled placement="row">
									<up-radio :customStyle="{marginLeft: '8px'}" v-for="(an,index) in qu.answer"
										:key="index" :label="an" :name="an">
									</up-radio>
								</up-radio-group>
							</template>
						</template>
					</view>

					<up-line margin="30rpx 0 30rpx 0"></up-line>
					<view class="betweenX mar-top-30">
						<view></view>
						<view class="centerXY">
							<view class="color-text font-26">订单总额</view>
							<text class="color-error font-36 font-w-500">￥{{item.amount}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>


		<view class="betweenX button-bottom centerXY" v-if="info.pay_status == 1">
			<view class="font-26"></view>
			<view class="centerXY font-24">
				<view @click="isPay = true" class="btn mar-left-20 button-style">继续支付</view>
			</view>
		</view>
		<view class="betweenX button-bottom centerXY" v-else-if="info.pay_status == 3">
			<view class="font-26"></view>
			<view class="centerXY font-24">
				<view @click="hanldeRefund(info)" class="btn">订单退款</view>
				<view @click="hanldeOrderTrends(info)" class="btn mar-left-20">订单动态</view>
				<!-- <view class="btn mar-left-20 button-style">评价订单</view> -->
			</view>
		</view>

		<!-- 选择支付方式 -->
		<up-popup v-if="isPay" :show="isPay" round="20" bgColor="#f4f5f9" closeable @close="isPay =false">
			<view class="pad-30 font-36 color-text">选择支付方式</view>
			<pay-list :orderNos="[info.order_no]"></pay-list>
		</up-popup>

		<!-- 退款弹窗 -->
		<up-popup :show="isRefund" mode="center" round="30" closeable @close="isRefund = false">
			<view class="centerXY columnY popup-bg pad-30 color-text">
				<view class="font-30 mar-top-30">退款</view>
				<view v-for="(item,i) in refundData" :key="i" class="font-28 mar-top-30 widthB100">
					<view>服务: {{item.work_name}}
					</view>
					<view class="mar-top-20 betweenX">
						<view class="color-error">违约金: {{item?.break_amount}}</view>
						<view>退款金额: {{item?.refund_amount}}</view>
					</view>
					<view v-if="item.title" class="color-error mar-top-20">提示: {{item.title}}</view>
				</view>

				<view class="textarea mar-top-30">
					<up-textarea v-model="refundText" placeholder="请输入退款原因" count maxlength="100"></up-textarea>
				</view>
				<view>
					<view @click="submitEvaluate" class="btn mar-top-30">确定</view>
				</view>
			</view>
		</up-popup>

		<my-popup title="提示" content="你确定要修改上门时间吗？" :show="isPopup" @cancel="isPopup = false"
			@confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { orderInfo, refundPreview, refundAdd, changePlanBeginAt, orderTrends } from '@/api/index.js';
	import { onLoad } from '@dcloudio/uni-app'
	import { timeFormat } from '@/node_modules/uview-plus';
	import { dataReportFun } from '@/util/dataReport.js'

	// 跳转订单动态
	const hanldeOrderTrends = (item) => {
		uni.navigateTo({
			url: '/pages/order/orderTrends/orderTrends?order_no=' + item.order_no
		})
	}

	// 时间选择
	const minDate = Date.now() + (2 * 60 * 60 * 1000); // 开始时间默认2小时过后
	const currentDate = new Date(Date.now());
	// 添加 2 个月
	const maxDate = currentDate.setMonth(currentDate.getMonth() + 1);
	const dateMode = ref("date");
	const formatter = (type, value) => {
		if (type === 'minute') {
			return `00`;
		}
		return value;
	};

	// 打开弹窗
	const itemInfo = ref({});
	let isPopup = ref(false);
	const hanldeDatetime = (item) => {
		itemInfo.value = item;
		isPopup.value = true;
	}

	// 提交要修改的时间
	const hanldeConfirmDate = (e, item) => {
		let time = e.mode == 'datetime' ? timeFormat(e.value, 'yyyy-mm-dd hh:00') :
			timeFormat(item.worker.plan_begin_at, 'yyyy-mm-dd');
		changePlanBeginAt({
			order_no: item.order_no,
			new_plan_begin_at: time
		}).then(res => {
			item.isTime = false;
			uni.$u.toast('操作成功');
			getOrderInfo();
		})
	}

	// 打开选择时间弹窗
	const hanldeConfirm = () => {
		isPopup.value = false;
		itemInfo.value.isTime = true;
	}

	// 使用 reactive 创建响应式对象  
	const timeData = ref({});

	// 定义 onChange 方法  
	const onChangeTime = (e) => {
		timeData.value = e;
	};

	// 提交退款
	const submitEvaluate = () => {
		if (refundText.value == "") {
			uni.$u.toast('请输入退款原因');
			return
		}

		refundAdd({
			order_no: info.value.order_no,
			refund_reason: refundText.value
		}).then(res => {
			isRefund.value = false;
			uni.$u.toast('操作成功');
			getOrderInfo();
		})
	}

	// 订单退款
	const isRefund = ref(false);
	// 退款失败提示框
	const refundText = ref('');
	const refundData = ref([]);
	const enableRefund = ref(false);
	const hanldeRefund = async (row) => {
		let preview = await refundPreview({
			order_no: row.order_no,
			scene: '11'
		})

		if (preview.data.refund_rules) {
			isRefund.value = true;
			refundData.value = preview.data.refund_rules;
		}
	}

	// 拨打电话
	const hanldeOpenTel = (user) => {
		uni.makePhoneCall({
			phoneNumber: user.tel, // 电话号码
			success: function() {
				console.log('Call successful');
			},
			fail: function(err) {
				console.error('Call failed: ', err);
			}
		});
	}

	// 接收参数
	const props = ref({});
	onLoad((option) => {
		if (option.order_no) {
			props.value = option;
			getOrderInfo();
		}

		dataReportFun({
			event: "client.page_view",
		})
	})

	const worker = ref({});
	const info = ref({});
	const details = ref([]);
	const isPay = ref(false);

	// 当前时间
	const hanldeTime = (endTiem) => {
		const timeNew = parseInt(Date.now() / 1000);
		return (endTiem - timeNew) * 1000;
	}

	const service_order = ref({});
	const service_order_task = ref([]);
	const service_order_workers = ref([])
	const getOrderInfo = () => {
		// 获取订单详情
		orderInfo({
			order_no: props.value.order_no
		}).then(res => {
			let data = res.data;
			info.value = data.info;
			service_order.value = data.service_order;
			service_order_task.value = data.service_order_task;
			service_order_workers.value = data.service_order_workers;
			worker.value = data.worker;
		})
	}
</script>

<style scoped lang="scss">
	.imageIcon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: 0rpx;
		z-index: 2;
	}

	.btn {
		width: 200rpx;
		height: 80rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 80rpx;
		text-align: center;
	}

	.btn2 {
		width: 200rpx;
		height: 60rpx;
		border-radius: 50rpx;
		border: 2rpx solid #C1C1C1;
		line-height: 60rpx;
		text-align: center;
	}

	.list {
		margin-bottom: 30rpx;
		overflow: hidden;
	}

	.list-box {
		padding-bottom: 150rpx;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		margin-right: 10rpx;
		border-radius: 50%;
	}

	.popup-bg {
		width: 670rpx;
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
		border-radius: 30rpx;
	}

	.textarea {
		width: 100%;
	}


	:deep(.u-checkbox) {
		width: 100%;
	}
</style>